<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="文件分片大小">
                <el-input v-model="propJson.partSize" style="width: 100%">
                    <template #append>
                        <el-select v-model="propJson.partSizeUnit" placeholder="Select" style="width: 115px">
                            <el-option label="MB" value="mb" />
                            <el-option label="KB" value="kb" />
                            <el-option label="B" value="B" />
                        </el-select>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="文件上传最大重复次数">
                <el-input-number v-model="propJson.maxCheckLevel" :min="1"/>
            </el-form-item>

            <el-form-item label="上传文件组件类型">
                <el-radio-group v-model="propJson.uploadType">
                    <el-radio label="button">按钮类型</el-radio>
                    <el-radio label="icon">框图类型</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="文字大小" v-if="propJson.uploadType === 'button'">
                <el-input-number v-model="propJson.buttonFontSize" :min="1"/>
            </el-form-item>

            <el-form-item label="图标大小" v-if="propJson.uploadType === 'icon'">
                <el-input-number v-model="propJson.iconFontSize" :min="1"/>
            </el-form-item>

            <el-form-item label="框图组件高度" v-if="propJson.uploadType === 'icon'">
                <el-input-number v-model="propJson.iconFontHeight" :min="1"/>
            </el-form-item>

            <el-divider>上传前置请求配置</el-divider>

            <el-form-item label="调用方式">
                <!-- MSSA Microsoft Service Share Api -->
                <!-- MSOA Microsoft Service Owned Api -->
                <!-- RTSA RestTemplate Service Share Api -->
                <el-radio-group v-model="propJson.doUploadBeforeAction.apiType">
                    <el-radio label="MSSA">微服务共享API</el-radio>
                    <el-radio label="MSOA">微服务自有API</el-radio>
                    <el-radio label="RTSA">通用透传API</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务地址">
                <el-input v-model="propJson.doUploadBeforeAction.apiPath" style="width: 100%" placeholder="服务地址" />
            </el-form-item>

            <el-form-item label="请求方式">
                <el-radio-group v-model="propJson.doUploadBeforeAction.apiMethod">
                    <el-radio label="GET">GET请求</el-radio>
                    <el-radio label="POST">POST请求</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.doUploadBeforeActionInnerRequestVariable">
                    <template #title>
                        <div class="collapseTitle">
                            <span>{{item.name}}</span>
                        </div>
                    </template>
                    <el-form-item label="参数类型">
                        <el-radio-group v-model="item.type">
                            <el-radio label="custom">自定义</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赋值字段" v-if="item.type === 'custom'">
                        <el-input v-model="item.variableName" style="width: 100%" placeholder="$."/>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>


            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addRequestVariable(propJson.doUploadBeforeAction)">添加请求入参</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.doUploadBeforeAction.apiParamList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteRequestVariable(propJson.doUploadBeforeAction, paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="paramItem.type">
                                <el-radio label="custom">自定义</el-radio>
                                <el-radio label="variable">关联变量</el-radio>
                                <el-radio label="urlQuery">URL地址变量</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="参数名称">
                            <el-input v-model="paramItem.variableName" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="参数值" v-if="paramItem.type === 'custom'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%">
                                <template #prepend>
                                    <el-select v-model="paramItem.variableType" placeholder="Select" style="width: 115px">
                                        <el-option label="字符串" value="String" />
                                        <el-option label="数组" value="Array" />
                                        <el-option label="对象" value="Object" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="变量名称" v-if="paramItem.type === 'variable'">
                            <el-select v-model="paramItem.variableParamName" placeholder="变量名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="URL地址参数名称" v-if="paramItem.type === 'urlQuery'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" />
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addResponseVariable(propJson.doUploadBeforeAction)">添加响应出参映射</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.doUploadBeforeAction.apiResponseList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteResponseVariable(propJson.doUploadBeforeAction, paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数赋值字段">
                            <el-input v-model="paramItem.variableName" style="width: 100%" placeholder="$."/>
                        </el-form-item>

                        <el-form-item label="参数值">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" placeholder="参数值jsonPath"/>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <el-divider>上传请求配置</el-divider>

            <el-form-item label="调用方式">
                <!-- MSSA Microsoft Service Share Api -->
                <!-- MSOA Microsoft Service Owned Api -->
                <!-- RTSA RestTemplate Service Share Api -->
                <el-radio-group v-model="propJson.doUploadAction.apiType">
                    <el-radio label="MSSA">微服务共享API</el-radio>
                    <el-radio label="MSOA">微服务自有API</el-radio>
                    <el-radio label="RTSA">通用透传API</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务地址">
                <el-input v-model="propJson.doUploadAction.apiPath" style="width: 100%" placeholder="服务地址" />
            </el-form-item>

            <el-form-item label="请求方式">
                <el-radio-group v-model="propJson.doUploadAction.apiMethod">
                    <el-radio label="GET">GET请求</el-radio>
                    <el-radio label="POST">POST请求</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.doUploadActionInnerRequestVariable">
                    <template #title>
                        <div class="collapseTitle">
                            <span>{{item.name}}</span>
                        </div>
                    </template>
                    <el-form-item label="参数类型">
                        <el-radio-group v-model="item.type">
                            <el-radio label="custom">自定义</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赋值字段" v-if="item.type === 'custom'">
                        <el-input v-model="item.variableName" style="width: 100%" placeholder="$."/>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>


            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addRequestVariable(propJson.doUploadAction)">添加请求入参</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.doUploadAction.apiParamList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteRequestVariable(propJson.doUploadAction, paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="paramItem.type">
                                <el-radio label="custom">自定义</el-radio>
                                <el-radio label="variable">关联变量</el-radio>
                                <el-radio label="urlQuery">URL地址变量</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="参数名称">
                            <el-input v-model="paramItem.variableName" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="参数值" v-if="paramItem.type === 'custom'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%">
                                <template #prepend>
                                    <el-select v-model="paramItem.variableType" placeholder="Select" style="width: 115px">
                                        <el-option label="字符串" value="String" />
                                        <el-option label="数组" value="Array" />
                                        <el-option label="对象" value="Object" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="变量名称" v-if="paramItem.type === 'variable'">
                            <el-select v-model="paramItem.variableParamName" placeholder="变量名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="URL地址参数名称" v-if="paramItem.type === 'urlQuery'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" />
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addResponseVariable(propJson.doUploadAction)">添加响应出参映射</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.doUploadAction.apiResponseList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteResponseVariable(propJson.doUploadAction, paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数赋值字段">
                            <el-input v-model="paramItem.variableName" style="width: 100%" placeholder="$."/>
                        </el-form-item>

                        <el-form-item label="参数值">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" placeholder="参数值jsonPath"/>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <el-divider>上传校验请求配置</el-divider>

            <el-form-item label="调用方式">
                <!-- MSSA Microsoft Service Share Api -->
                <!-- MSOA Microsoft Service Owned Api -->
                <!-- RTSA RestTemplate Service Share Api -->
                <el-radio-group v-model="propJson.doUploadCheckAction.apiType">
                    <el-radio label="MSSA">微服务共享API</el-radio>
                    <el-radio label="MSOA">微服务自有API</el-radio>
                    <el-radio label="RTSA">通用透传API</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务地址">
                <el-input v-model="propJson.doUploadCheckAction.apiPath" style="width: 100%" placeholder="服务地址" />
            </el-form-item>

            <el-form-item label="请求方式">
                <el-radio-group v-model="propJson.doUploadCheckAction.apiMethod">
                    <el-radio label="GET">GET请求</el-radio>
                    <el-radio label="POST">POST请求</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.doUploadCheckActionInnerRequestVariable">
                    <template #title>
                        <div class="collapseTitle">
                            <span>{{item.name}}</span>
                        </div>
                    </template>
                    <el-form-item label="参数类型">
                        <el-radio-group v-model="item.type">
                            <el-radio label="custom">自定义</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赋值字段" v-if="item.type === 'custom'">
                        <el-input v-model="item.variableName" style="width: 100%" placeholder="$."/>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>


            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addRequestVariable(propJson.doUploadCheckAction)">添加请求入参</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.doUploadCheckAction.apiParamList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteRequestVariable(propJson.doUploadCheckAction, paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="paramItem.type">
                                <el-radio label="custom">自定义</el-radio>
                                <el-radio label="variable">关联变量</el-radio>
                                <el-radio label="urlQuery">URL地址变量</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="参数名称">
                            <el-input v-model="paramItem.variableName" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="参数值" v-if="paramItem.type === 'custom'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%">
                                <template #prepend>
                                    <el-select v-model="paramItem.variableType" placeholder="Select" style="width: 115px">
                                        <el-option label="字符串" value="String" />
                                        <el-option label="数组" value="Array" />
                                        <el-option label="对象" value="Object" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="变量名称" v-if="paramItem.type === 'variable'">
                            <el-select v-model="paramItem.variableParamName" placeholder="变量名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="URL地址参数名称" v-if="paramItem.type === 'urlQuery'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" />
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addResponseVariable(propJson.doUploadCheckAction)">添加响应出参映射</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.doUploadCheckAction.apiResponseList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteResponseVariable(propJson.doUploadCheckAction, paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数赋值字段">
                            <el-input v-model="paramItem.variableName" style="width: 100%" placeholder="$."/>
                        </el-form-item>

                        <el-form-item label="参数值">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" placeholder="参数值jsonPath"/>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <el-divider>上传合并请求配置</el-divider>

            <el-form-item label="调用方式">
                <!-- MSSA Microsoft Service Share Api -->
                <!-- MSOA Microsoft Service Owned Api -->
                <!-- RTSA RestTemplate Service Share Api -->
                <el-radio-group v-model="propJson.doUploadMergeAction.apiType">
                    <el-radio label="MSSA">微服务共享API</el-radio>
                    <el-radio label="MSOA">微服务自有API</el-radio>
                    <el-radio label="RTSA">通用透传API</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="服务地址">
                <el-input v-model="propJson.doUploadMergeAction.apiPath" style="width: 100%" placeholder="服务地址" />
            </el-form-item>

            <el-form-item label="请求方式">
                <el-radio-group v-model="propJson.doUploadMergeAction.apiMethod">
                    <el-radio label="GET">GET请求</el-radio>
                    <el-radio label="POST">POST请求</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.doUploadMergeActionInnerRequestVariable">
                    <template #title>
                        <div class="collapseTitle">
                            <span>{{item.name}}</span>
                        </div>
                    </template>
                    <el-form-item label="参数类型">
                        <el-radio-group v-model="item.type">
                            <el-radio label="custom">自定义</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赋值字段" v-if="item.type === 'custom'">
                        <el-input v-model="item.variableName" style="width: 100%" placeholder="$."/>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>


            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addRequestVariable(propJson.doUploadMergeAction)">添加请求入参</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.doUploadMergeAction.apiParamList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteRequestVariable(propJson.doUploadMergeAction, paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数类型">
                            <el-radio-group v-model="paramItem.type">
                                <el-radio label="custom">自定义</el-radio>
                                <el-radio label="variable">关联变量</el-radio>
                                <el-radio label="urlQuery">URL地址变量</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="参数名称">
                            <el-input v-model="paramItem.variableName" style="width: 100%"/>
                        </el-form-item>
                        <el-form-item label="参数值" v-if="paramItem.type === 'custom'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%">
                                <template #prepend>
                                    <el-select v-model="paramItem.variableType" placeholder="Select" style="width: 115px">
                                        <el-option label="字符串" value="String" />
                                        <el-option label="数组" value="Array" />
                                        <el-option label="对象" value="Object" />
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="变量名称" v-if="paramItem.type === 'variable'">
                            <el-select v-model="paramItem.variableParamName" placeholder="变量名称" style="width: 100%">
                                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="URL地址参数名称" v-if="paramItem.type === 'urlQuery'">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" />
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addResponseVariable(propJson.doUploadMergeAction)">添加响应出参映射</el-button>
            </div>

            <el-form label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="paramIndex" v-for="(paramItem, paramIndex) in propJson.doUploadMergeAction.apiResponseList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>参数 {{(paramIndex + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteResponseVariable(propJson.doUploadMergeAction, paramIndex)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="参数赋值字段">
                            <el-input v-model="paramItem.variableName" style="width: 100%" placeholder="$."/>
                        </el-form-item>

                        <el-form-item label="参数值">
                            <el-input v-model="paramItem.variableValue" style="width: 100%" placeholder="参数值jsonPath"/>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

        </el-form>
    </div>
</template>

<script name="FileUploadMultiDrawer" setup lang="ts">
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addRequestVariable(item) {
    if (!item.apiParamList) {
        item.apiParamList = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "custom", variableType: "String", variableParamName: ""}
    item.apiParamList.push(variableInfo)
}

function deleteRequestVariable(item, index) {
    // 删除数组中的数据
    item.apiParamList.splice(index, 1);
}

function addResponseVariable(item) {
    if (!item.apiResponseList) {
        item.apiResponseList = []
    }
    let variableInfo = {variableName: "", variableValue: ""}
    item.apiResponseList.push(variableInfo)
}

function deleteResponseVariable(item, index) {
    // 删除数组中的数据
    item.apiResponseList.splice(index, 1);
}
</script>

<style scoped lang="less">

</style>